{extend name='Common/index' /} {block name='content'}
<section class="content">
  <div class="box">
    <div class="box-body">
      {if empty($info.replierid) && $info.replierid != session('_adminInfo')['user_id']}
      <div class="clearfix">
        <div class="tool-box text-right">
          <button class="btn btn-primary" onclick="join('{$_GET.id}')">工单接入</button>
        </div>
      </div>
      {/if}
      <div class="fs-12 p-3">
        <div class="cont-box col-md-12">
          <div class="form-group form-row">
            <label for="" class="col-form-label col-md-1">工单类型：</label>
            <div class="col-md-10">
              <div class="form-control-sm form-control-plaintext">{$info.type}</div>
            </div>
          </div>
          <div class="form-group form-row">
            <label for="" class="col-form-label col-md-1">工单状态：</label>
            <div class="col-md-10">
              <div class="form-control-sm form-control-plaintext">{$info.tStatus}</div>
            </div>
          </div>
          <div class="form-group form-row">
            <label for="" class="col-form-label col-md-1">工单标题：</label>
            <div class="col-md-10">
              <div class="form-control-sm form-control-plaintext">{$info.title}</div>
            </div>
          </div>
          <div class="form-group form-row">
            <label for="" class="col-form-label col-md-1">问题描述：</label>
            <div class="col-md-10">
              <div class="form-control-sm form-control-plaintext">{$info.content}</div>
            </div>
          </div>
          {if $info.imgs}
          <div class="form-group form-row">
            <label for="" class="col-form-label col-md-1">附加文件：</label>
            <div class="col-md-10">
              <img src="{$info.imgs}" style="max-width:200px;max-height: 200px;margin-top: 15px;display: block;" />
            </div>
          </div>
          {/if}
        </div>
        <hr />
        {if $info.replierid == session('_adminInfo')['user_id']}
        <div class="cont-box  col-md-12 form">
          <div class="page-header">
            <h4>回复问题</h4>
          </div>
          <input type="hidden" name="tid" value="{$_GET['id']}">
          <div class="form-group form-row">
            <div class="col-md-6">
              <div class="form-control form-control-sm content" name="content" data-name="content"
                contenteditable="true" style="height: 100px;overflow: auto;"></div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-6">
              <div class="file-list">
                <input type="file" id="file" class="upfile" data-rule=".jpg,.png,.gif" data-size="2" data-width="200px"
                  data-height="200px" autocomplete="off">
                <input type="hidden" id="imgs" name="imgs" value="" autocomplete="off">
                <p class="help-block">请上传 ".jpg"、".png"、".gif" 并且大小不超过2M 的图片文件</p>
              </div>
            </div>
          </div>
          <div class="form-group form-row">
            <div class="col-md-12 p-1">
              <button class="btn btn-primary sub">提交</button>
            </div>
          </div>
        </div>
        <hr />
        {/if}
        {if !empty($log)}
        <div class="cont-box col-md-12 logs">
          <div class="page-header">
            <h4>沟通记录</h4>
          </div>
          {foreach name="log" item="v"}
          <div class="media clearfix">
            <div class="media-left mr-3">
              {if $v['fromid'] === session('_adminInfo')['user_id']}
              <img src="__THEMES__/defualt/img/qd.png" style="width: 60px;height: 60px;" />
              {else /}
              <img src="__THEMES__/defualt/img/self.png" style="width: 60px;height: 60px;" />
              {/if}
            </div>
            <div class="media-body">
              <div class="infos mb-3">
                {if $v['fromid'] === session('_adminInfo')['user_id']}
                <span>自己</span>
                {else /}
                <span>客户</span>
                {/if}
                <span class="datetime text-secondary">{$v.create_time}</span>
              </div>
              <div class="cont mb-3">
                {$v.content}
              </div>
              <div class="affixs">
                {if $v['imgs']}
                <img src="{$v.imgs}" style="max-width: 200px;max-height: 200px;" />
                {/if}
              </div>
            </div>
          </div>
          {/foreach}
        </div>
        {/if}
      </div>
    </div>
  </div>
</section>
{/block} {block name='js'}
<style>
  .mr-3 {
    margin-right: 15px;
  }

  .mb-3 {
    margin-bottom: 15px;
  }

  .page-header {
    border: none;
  }

  .logs .media {
    padding: 15px;
    margin: 0;
  }

  .logs .media+.media {
    border-top: 1px solid rgba(0, 0, 0, .1);
  }
</style>
<script>
  callEditor();

  function join(id) {
    console.log(id)
    if (confirm('确定要接入该工单吗?')) {
      ajax("{:url('admin/Ticket/join')}?id=" + id).then((e) => {
        window.location.href = "{:url('admin/Ticket/details')}?id=" + id;
      })
    }
  }
  $('.upfile').change(function () {
    let tfile = $(this),
      imgurl = '',
      formdatas = new FormData(),
      suffix = tfile[0].files[0].name.substr(tfile[0].files[0].name.lastIndexOf("."));
    if (tfile.data('rule').indexOf(suffix) < 0) {
      alert('文件类型不符合要求');
      return false;
    }
    if ((tfile[0].files[0].size / 1024 / 1024) >= Number(tfile.data('size'))) {
      alert('图片尺寸大于2M');
      return false;
    }
    formdatas.append('file', tfile[0].files[0]);
    ajax('/uploadImg', formdatas, 'post', true).then(e => {
      if (e.status == 200) {
        tfile.siblings('[name="imgs"]').val(e.data);
        if (tfile.next().prop('nodeName') == 'IMG') {
          tfile.next().attr('src', e.data);
          return;
        }
        tfile.after(
          `<img src="${e.data}" style="max-width:${tfile.data('width')};max-height: ${tfile.data('height')};margin-top: 15px;display: block;"/>`
        );
        return;
      }
      alert(e.msg);
    });
  });
  $('.sub').click(function () {
    let names = document.querySelectorAll('.form [name]'),
      vals = {};
    names = [].slice.call(names);
    names.map((e) => {
      let name = e.name && e.name || $(e).data("name");
      console.log(name)
      vals[name] = e.value && e.value || $(e).html();
    });
    ajax('{:url("admin/Ticket/reply")}', vals, 'post').then(e => {
      if (e.status === 200) {
        alert(e.msg);
        window.location.reload();
      } else {
        alert(e.msg);
      }
    });
  });
</script>
{/block}